import React, { Component } from 'react'
import { Card, Button, Input, Form, InputNumber, Cascader, message } from 'antd'
import { Link } from 'react-router-dom'
import { findAllGategroy } from '../../../api/category'
import { addGoods } from '../../../api/goods'
import MyPictureWall from '../../../components/upImg/MyPicturesWall'

const { TextArea } = Input

export default class ListAdd extends Component {
  state = {
    options: [],
    typeId: '',
  }
  // 表单提交
  onFinish = async (values) => {
    console.log(values)
    values.type = this.state.typeId
    const res = await addGoods(values)
    if (res.data.code) {
      message.success('添加成功')
    } else {
      message.error('添加失败')
    }
  }
  componentDidMount() {
    this.getCategoryData()
  }
  // 获取option数据
  getCategoryData = async () => {
    const res = await findAllGategroy()
    this.setState({
      options: res.data.data,
    })
  }
  // 分类改变
  onTypeChange = (file, value) => {
    console.log(file)
    console.log(value)
    if (value.length == 2) {
      this.setState({
        typeId: value[1].id,
      })
    } else {
      message.warn('必须选择二级分类')
    }
  }

  render() {
    // 表单样式
    const layout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 8 },
    }
    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    }

    return (
      <div>
        <Card
          title="添加商品"
          extra={<Link to="/home/product/list">返回</Link>}
          style={{ width: '100%' }}
        >
          <Form
            {...layout}
            style={{ height: '470px' }}
            name="basic"
            onFinish={this.onFinish}
          >
            <Form.Item
              label="商品名字"
              name="name"
              rules={[{ required: true, message: '请输入商品名字' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="商品的描述"
              name="title"
              rules={[{ required: true, message: '请输入商品的基本描述' }]}
            >
              <TextArea />
            </Form.Item>
            <Form.Item
              label="商品的价格"
              name="price"
              rules={[{ required: true, message: '请输入价格信息' }]}
            >
              <InputNumber />
            </Form.Item>
            <Form.Item
              label="商品的分类"
              name="type"
              rules={[{ required: true, message: '请选择分类' }]}
            >
              <Cascader
                options={this.state.options}
                onChange={this.onTypeChange}
                placeholder="请选择分类"
              />
            </Form.Item>
            <Form.Item label="上传图片" name="imgSrc">
              <MyPictureWall></MyPictureWall>
            </Form.Item>
            <Form.Item
              label="商品的详情"
              name="msg"
              rules={[{ required: true, message: '请选择分类' }]}
            >
              <TextArea />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                添加
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}
